<template>
  <el-dialog :close-on-click-modal='false'  v-drag :title="$t('接口实时速率信息')" :v-if="dialogVisible" :visible.sync="dialogVisible" width="880px" center @close="close">
   <div class="flow-dialog">
    <el-table :data="flowList" v-loading="loading" ref="multipleTable" size='mini'>
      <el-table-column prop="interface" align='center' :label="$t('接口名称')" width="80"></el-table-column>
      <el-table-column align='center' prop="ePortOrlPort" :label="$t('网口类型')" width="95">
        <template slot-scope="scope">
          {{ ePortOrlPortList[scope.row.ePortOrlPort] || scope.row.ePortOrlPort }}
        </template>
      </el-table-column>
      <el-table-column prop="interface-state" align='center' :label="$t('链路状态')" width="90">
        <template slot-scope="scope">
          <div class="interfaceState">
            <i class="el-icon-circle-check" v-if="scope.row['interface-state'] === 'on'" style="color: #009966;font-size:16px;"></i>
            <i class="el-icon-error" v-else style="font-size:16px;"></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="rx-rate" align='center' :label="$t('收包速率(KB/s)')">
        <template slot-scope="scope">
          {{ scope.row['rx-rate'] === 0 ? scope.row['rx-rate'] : scope.row['rx-rate'].toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="tx-rate" align='center' :label="$t('发包速率(KB/s)')">
        <template slot-scope="scope">
          {{ scope.row['tx-rate'] === 0 ? scope.row['tx-rate'] : scope.row['tx-rate'].toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="realtime-rate" align='center' :label="$t('实时速率(KB/s)')">
        <template slot-scope="scope">
          {{ scope.row['realtime-rate'] === 0 ? scope.row['realtime-rate'] : scope.row['realtime-rate'].toFixed(2) }}
        </template>
      </el-table-column>
    </el-table>
   </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="danger" @click="close">{{$t('关 闭')}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getFlow } from '@/api/home'
export default {
  name: 'flowDialog',
  data () {
    return {
      dialogVisible: false,
      flowList: [],
      loading: false,
      ePortOrlPortList: {
        'ePort': this.$t('电口'),
        'lPort': this.$t('光口')
      }
    }
  },
  beforeDestroy () {
    if (this.timerFlow) {
      clearInterval(this.timerFlow) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    init () {
      this.dialogVisible = true
      this.loading = true
      this.listData().then(res => {
        this.loading = false
        this.timerFlow = setInterval(() => {
          getFlow().then(res => {
            if (res.status === 0) {
              this.flowList = res.info
            }
          }).catch(e => {
            clearInterval(this.timerFlow)
          })
        }, 1000)
      })
    },
    listData () {
      return new Promise((resolve, reject) => {
        getFlow().then(res => {
          if (res.status === 0) {
            this.flowList = res.info
          }
          resolve()
        })
      })
    },
    close () {
      this.dialogVisible = false
      this.$parent.flowDialogVisible = false
      this.flowList = []
      if (this.timerFlow) {
        clearInterval(this.timerFlow) // 在Vue实例销毁前，清除我们的定时器
      }
    }
  }
}
</script>
<style scoped lang="less">
  .flow-dialog {
      max-height: 580px;
      overflow-y: auto; 
  }
</style>